<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>理解事件对象、常见属性与方法</title>
	</head>
	<body>
		<div>事件对象的理解</div>
		<ul>
			<li>li1</li>
			<li>li2</li>
			<li>li3</li>
		</ul>
		
		<script>
			var div = document.querySelector('div');
			// div.onclick = function(event){
			// 	alert("点击了");
			// 	console.log(event);
			// }
			div.addEventListener('click',function(event){
				console.log(event);
				console.log(event.target);
				console.log(this);
			});
			
			var ul = document.querySelector('ul');
			ul.addEventListener('click',function(event){
				console.log(event.target);
				console.log(this);
			});
			/* 
			 event.target和this的区别
			 target返回的是触发事件的元素（对象）
			 this返回的是绑定的事件对象
			 
			 */
			
			
		</script>
	</body>
</html>